<template>
  <div class="register-container">
    <div class="card">
      <h2>跑腿员注册</h2>
      <form @submit.prevent="handleRegister">
        <!-- 用户名 -->
        <div class="form-group">
          <label>用户名</label>
          <input 
            type="text" 
            v-model="form.runner_account" 
            required
            placeholder="请输入用户名"
          >
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <label>密码</label>
          <input 
            type="password" 
            v-model="form.runner_password" 
            required
            placeholder="请输入密码"
          >
        </div>

        <!-- 手机号码 -->
        <div class="form-group">
          <label>手机号码</label>
          <input 
            type="tel" 
            v-model="form.phone" 
            required
            placeholder="请输入手机号码"
            pattern="1[3-9]\d{9}"
            title="请输入有效的11位手机号码"
          >
        </div>

        <!-- 真实姓名 -->
        <div class="form-group">
          <label>真实姓名</label>
          <input 
            type="text" 
            v-model="form.real_name" 
            required
            placeholder="请输入真实姓名"
          >
        </div>

        <!-- 身份证号 -->
        <div class="form-group">
          <label>身份证号</label>
          <input 
            type="text" 
            v-model="form.id_card" 
            required
            placeholder="请输入身份证号"
          >
        </div>

        <!-- 银行卡号（选填） -->
        <div class="form-group">
          <label>银行卡号（选填）</label>
          <input 
            type="text" 
            v-model="form.bank_card_no" 
            placeholder="请输入银行卡号"
          >
        </div>

        <button type="submit" class="submit-btn">提交注册</button>
        <p class="link-text">
          已有账号？<router-link to="/login">去登录</router-link>
        </p>
      </form>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()
const form = ref({
  runner_account: '',
  runner_password: '',
  phone: '',  // 新增手机号码字段
  real_name: '',
  id_card: '',
  bank_card_no: ''
})

const handleRegister = async () => {
  // 简单的手机号码验证
  if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
    alert('请输入有效的11位手机号码')
    return
  }
  
  try {
    // 调用后端注册接口，会包含手机号码
    await request.post('/runner/register', form.value)
    alert('注册成功，请等待审核')
    router.push('/login') // 跳转到登录页
  } catch (error) {
    console.error('注册失败', error)
    alert(error.message || '注册失败，请稍后重试')
  }
}
</script>


<style scoped>
.register-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
}
.card {
width: 400px;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 1rem;
}
input {
width: 95%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 0.3rem;
}
/* 为手机号码输入框添加特殊样式，方便识别 */
input[type="tel"] {
border-left: 3px solid #3B82F6;
}
.submit-btn {
width: 100%;
padding: 0.8rem;
background: #3B82F6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #2563EB;
}
.link-text {
text-align: center;
margin-top: 1rem;
}
.link-text a {
color: #3B82F6;
text-decoration: none;
}
</style>
  